<template>
	<view>
		<!-- 顶部导航栏 -->
		<view class="status_bar"></view>
		<myTopBar title="月报/年报" url='../../static/index/button_an.png'></myTopBar>

		<view class="content">
			<view class="content1">
				<!-- 类型 -->
				<view class="center-right-">
					<view class="center-right">
						<view class="center-right-inputSelect">
							<text>类型：</text>
							<input @click="chooseThing" disabled type="text" v-model="thing" />
							<view class="center-right-inputSelect-icon" @click="visibleThing=false,chooseIndex=0" >
								<u-icon color='#58B6E5' :name='visibleThing?"arrow-up-fill":"arrow-down-fill"'>
								</u-icon>
							</view>
						</view>
					</view>
					<!--  :value="valueThing"-->
					<picker-view @click="visibleThing=false,chooseIndex=0" v-if="visibleThing" @change="bindChangeThing"
						class="picker-view picker-view-thing">
						<picker-view-column>
							<view class="item" v-for="(item,index) in thingList" :key="index">{{item}}</view>
						</picker-view-column>
					</picker-view>
				</view>
				<!-- 日期选择 -->
				<view class="content1-date">
					<view class="center-right-">
						<view class="center-right">
							<view class="center-right-inputSelect">
								<text>日期：</text>
								<input @click="chooseDate" disabled type="text" v-model="data" />
								<view class="center-right-inputSelect-icon" @click="visible=false,chooseIndex=0">
									<u-icon color='#58B6E5' :name='visible?"arrow-up-fill":"arrow-down-fill"'></u-icon>
								</view>
							</view>
						</view>
						<picker-view @click="visible=false,chooseIndex=0" v-if="visible" :value="value"
							@change="bindChange" class="picker-view">
							<picker-view-column>
								<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
							</picker-view-column>
							<picker-view-column v-if="thing==='月报'">
								<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
							</picker-view-column>
						</picker-view>
					</view>
				</view>

				<view @click="toSearch" class="center-right-btn">查询</view>
			</view>
			<!-- 内容 -->
			<view class="content2">
				<view class="content2Title">
					{{this.thing}}内容：
				</view>
				<view class="content2Content">
					{{content.fileReport}}
				</view>
				<u-empty icon-size='50' img-width='150' font-size="15" v-if="content==={}" text="数据为空" ></u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	import myTopBar from '../topNavigationBar/topNavigationBar'
	export default {
		components: {
			myTopBar
		},
		data() {
			const date = new Date()
			const years = []
			const year = date.getFullYear()
			const months = []
			const month = date.getMonth() + 1
			for (let i = 2000; i <= date.getFullYear(); i++) {
				years.push(i)
			}
			for (let i = 1; i <= 12; i++) {
				months.push(i)
			}

			return {
				background: {
					backgroundColor: '#2169D3'
				},
				years,
				year,
				months,
				month,
				value: [9999, month - 1],
				visible: false,
				clickFlag: false,
				chooseIndex: 0,
				visibleThing: false,
				clickThingFlag: false,
				thingList: ['月报', '年报'],
				things: '',
				isType: 0,
				input1Flage: false,
				input2Flage: false,
				content:{}
			}
		},
		onLoad() {
			this.things = this.thingList[0]
		},
		methods: {
			toBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			bindChange: function(e) {
				let val = e.detail.value
				if (this.thing === '月报') {

					this.year = this.years[val[0]]
					this.month = this.months[val[1]]
				} else {
					this.year = this.years[val[0]]
				}
				console.log(e.detail.value);
				this.input1Flage = true
			},
			bindChangeThing(e) {
				const val = e.detail.value[0];
				this.things = this.thingList[val]
				console.log(this.things);
				this.chooseIndex = 0
				this.input2Flage = true
			},
			chooseThing() {
				if (this.chooseIndex === 0) {
					this.visibleThing = true;
					this.clickThingFlag = true
					this.chooseIndex = 1
					this.isType = 1
				}
			},
			chooseDate() {
				if(this.isType!=1){
					this.$u.toast("请先选择类型！")
				}
				if (this.chooseIndex === 0 && this.isType === 1) {
					this.visible = true;
					this.clickFlag = true
					this.chooseIndex = 1
				}
			},
			async toSearch() {
				if (!this.input2Flage && !this.input1Flage) {
					this.$u.toast("请先选择类型和日期！")
					return;
				}
				let month;
				if (this.month < 10) {
					month = this.year + "-0" + this.month
				} else {
					month = this.year + "-" + this.month
				}
				let param;
				if (this.thing === '年报') {
					param = {
						year: this.year,
						type: 2
					}
				} else {
					param = {
						month: month,
						type: 1
					}
				}
				const res = await this.$u.api.selectReport(param)
				if (!res.success) {
					// this.$u.toast(res.msg)
					return;
				}
				this.content=res.body.data
				console.log(this.content);
			}
		},
		computed: {
			data() {
				if (this.clickFlag) {
					if (this.thing === '月报') {
						return this.year + '年' + this.month + '月'
					} else {
						return this.year + '年'
					}
				} else {
					return ''
				}
			},
			thing() {
				if (this.clickThingFlag) {
					return this.things
					console.log(this.things);
				} else {
					return ''
				}
			}
		},

	}
</script>

<style>
	page {
		background-color: #2169D3;
		overflow: hidden;
	}

	/* 顶部导航栏 */
	/* 手机系统 系统状态栏高度 */
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #2169D3;
	}

	/* content */
	.content {
		display: flex;
		padding-top: 20rpx;
	}

	/* 日期选择 */
	.content1 {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx 38rpx;
	}

	.center-right {
		display: flex;
		margin: 10rpx 20rpx;
	}

	.center-right-inputSelect {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #58B6E5;
		width: 180rpx;
		height: 30rpx;
		border: 2rpx solid #000000;
		font-size: 16rpx;
		color: #FFFFFF;
		margin-right: 5rpx;
	}

	.center-right-inputSelect input {
		width: 120rpx;
		border-bottom: 3rpx solid #FFFFFF;
		margin-top: 0rpx;
		font-size: 13rpx;
		color: #034AB2;
	}

	.center-right-inputSelect-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		right: 8rpx;
		width: 20rpx;
		height: 16rpx;
		background-color: #FFFFFF;
		border: 1rpx dashed #000000;
	}

	.picker-view {
		position: absolute;
		z-index: 999;
		width: 140rpx;
		height: 120rpx;
		margin-left: 24rpx;
		font-size: 14rpx;
		background-color: #ACC4E6;
	}

	.item {
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.center-right-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 85rpx;
		height: 30rpx;
		color: #FFFFFF;
		font-size: 16rpx;
		background-color: #58B6E5;
		border: 2rpx solid #000000;
		border-radius: 10rpx;
	}

	.content2 {
		width: 420rpx;
		height: 200rpx;
		background-color: #FFFFFF;
		margin: 20rpx;
		font-size: 16rpx;
		padding: 20rpx;
		overflow-y: auto;
	}
	
	.content2Title{
		font-weight: 700;
	}
	
	.content2Content{
		text-indent: 1em;
		line-height: 30rpx;
	}
</style>
